<template>
  <view class="formBox">
    <uni-forms
      ref="valiForm"
      :rules="rules"
      v-model="formData"
      label-position="top"
      label-width="150"
    >
      <uni-forms-item label="矿灯柜号" name="frameLightNo">
        <!-- <uni-easyinput v-model="formData.frameLightNo" placeholder="请输入" /> -->
        <view>{{ formData.frameLightNo }}</view>
      </uni-forms-item>
      <uni-forms-item label="矿灯编号" name="lightNo">
        <!-- <uni-easyinput v-model="formData.lightNo" placeholder="请输入" /> -->
        <view>{{ formData.lightNo }}</view>
      </uni-forms-item>

      <template v-if="type !== 'edit'">
        <uni-forms-item label="处理日期" required name="lightProcessDate">
          <uni-datetime-picker
            type="date"
            v-model="formData.lightProcessDate"
          />
        </uni-forms-item>
        <uni-forms-item label="处理描述" required name="lightProcessDesc">
          <uni-easyinput
            type="textarea"
            v-model="formData.lightProcessDesc"
            placeholder="请输入"
          />
        </uni-forms-item>
      </template>

      <template v-if="['fp', 'receive'].indexOf(type) > -1">
        <uni-forms-item
          label="所在部门"
          :required="rules['deptId'].rules[0].required"
          name="deptId"
        >
          <uni-data-picker
            placeholder="请选择部门"
            popup-title="请选择部门"
            :localdata="treeData"
            v-model="formData.deptId"
            @change="onDeptChange"
          />
        </uni-forms-item>
        <uni-forms-item
          label="选择人员"
          :required="rules['empPersonnelId'].rules[0].required"
          name="empPersonnelId"
        >
          <uni-combox
            placeholder="请选择"
            :candidates="
              appStore.personData.filter((item) =>
                formData.deptId ? item.deptId === formData.deptId : true
              )
            "
            v-model="formData.empPersonnelId"
            @change="onUserChange"
          />
        </uni-forms-item>
      </template>

      <template v-if="['edit', 'replace', 'receive'].indexOf(type) > -1">
        <uni-forms-item label="矿灯领用投用时间" required name="receiveDate">
          <uni-datetime-picker type="date" v-model="formData.receiveDate" />
        </uni-forms-item>
        <uni-forms-item
          label="强制报废到期时间"
          :required="rules['expireDate'].rules[0].required"
          name="expireDate"
        >
          <uni-datetime-picker type="date" v-model="formData.expireDate" />
        </uni-forms-item>

        <uni-forms-item label="生产厂家" required name="manufacturer">
          <uni-easyinput v-model="formData.manufacturer" placeholder="请输入" />
        </uni-forms-item>
        <uni-forms-item label="安全标志" required name="safetyMark">
          <uni-easyinput v-model="formData.safetyMark" placeholder="请输入" />
        </uni-forms-item>
      </template>
    </uni-forms>
    <button class="btn" type="primary" @click="onSubmit('valiForm')">
      提交
    </button>
  </view>
</template>

<script>
import useAppStore from '@/store/modules/app';
export default {
  props: {
    data: {
      type: Object,
      default: {},
    },
    type: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      treeData: [],
      personData: [],
      // 表单数据
      formData: {
        lightProcessDate: '',
      },
      // 规则
      rules: {
        lightProcessDesc: {
          rules: [
            {
              required: true,
              errorMessage: '请填写内容',
            },
          ],
        },
        lightProcessDate: {
          rules: [
            {
              required: true,
              errorMessage: '请选择时间',
            },
          ],
        },
        receiveDate: {
          rules: [
            {
              required: true,
              errorMessage: '请选择时间',
            },
          ],
        },
        expireDate: {
          rules: [
            {
              required: true,
              errorMessage: '请选择时间',
            },
          ],
        },
        manufacturer: {
          rules: [
            {
              required: true,
              errorMessage: '请填写内容',
            },
          ],
        },
        safetyMark: {
          rules: [
            {
              required: true,
              errorMessage: '请填写内容',
            },
          ],
        },
        deptId: {
          rules: [
            {
              required: true,
              errorMessage: '请选择部门',
            },
          ],
        },
        empPersonnelId: {
          rules: [
            {
              required: true,
              errorMessage: '请选择人员',
            },
          ],
        },
      },
      // store
      appStore: useAppStore(),
    };
  },
  watch: {
    'formData.date': {
      handler(newVal) {},
      immediate: false,
      deep: true,
    },
  },
  created() {
    // 数据合并
    this.formData = Object.assign({}, this.formData, this.data);
    this.formData.lightProcessDate = this.$util.timestampToTime(
      new Date().getTime(),
      'YYYY-MM-DD'
    );
    // 分配，必填部门+人员
    // 更换，必填投用时间为当天，报废时间空
    // 领取，部门+人员可选，必填投用时间为当天，报废时间空
    if (['edit', 'replace', 'receive'].indexOf(this.type) > -1) {
      this.formData.receiveDate = this.$util.timestampToTime(
        new Date().getTime(),
        'YYYY-MM-DD'
      );
      this.formData.expireDate = '';
      this.rules['expireDate'].rules[0].required = false;
    }
    if (this.type === 'receive') {
      this.rules['deptId'].rules[0].required = false;
      this.rules['empPersonnelId'].rules[0].required = false;
    }
    // 部门数据
    this.treeData = this.$util.processingTree(
      this.appStore.deptData,
      'value',
      'parentId'
    );
  },
  methods: {
    // 下拉切换取name
    onDeptChange(e) {
      if (e.detail.value.length === 0) {
        this.formData.deptName = '';
      } else {
        this.formData.deptName = e.detail.value[e.detail.value.length - 1].text;
      }
      this.formData.empName = '';
      this.formData.empPersonnelId = '';
    },
    onUserChange(e) {
      this.formData.empName = e.text;
    },
    // 提交
    onSubmit(ref) {
      this.$refs[ref]
        .validate()
        .then((res) => {
          this.$emit('callback', {
            ...this.formData,
            ...res,
          });
        })
        .catch((err) => {
          console.log('err', err);
        });
    },
    // 跳转页面
    onLocation(url) {
      uni.navigateTo({
        url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.formBox {
  max-height: 70vh;
  padding: 60rpx 48rpx 100rpx;
  border-radius: 40rpx 40rpx 0 0;
  background: #fff;
  overflow: auto;
  .uni-forms {
    min-height: 38vh;
  }
}
</style>
